import { ref } from "vue";
import { ElTableColumn } from "element-plus";

const tableColumnProps = Object.keys(ElTableColumn.props); // 获取ElTableColumn的props
// 配置可通过 injectTableDefaultConfig 修改请求方法
export const injectConfig = ref({
  minHeight: 400, // 最小高度
});
export const buildTableProps = () => {
  return {
    /**
     * 额外属性
     * visible 是否显示该列
     * fieldType 字段类型 可映射到 element plus 列
     * dictionary 字典key TODO: 暂定
     */
    columns: { type: Array, default: () => [] }, // ElTableColumn配置
    actions: { type: Array, default: () => [] }, // 操作列
    pageSize: { type: Array, default: () => [30, 60, 100, 150, 200] }, // 页容量
    relativeEle: HTMLElement, // 相对父元素 用于自适应表格高度
    // 工具栏
    toolbar: {
      type: String,
      default: "download,refresh,fullscreen,columnSetting",
    },
    tableIcon: { type: String, default: "" }, // 表格图标
    tableName: { type: String, default: "" }, // 表格图标
    titleDirection: { type: String, default: "center" }, // 表头标题方向 "left", "center", "right"
    help: { type: String, default: "" }, // 表格提示文字
    actionsFixed: { type: String }, // 操作列固定位置
    actionsWidth: { type: Number }, // 操作列宽度
    showPagination: { type: Boolean, default: true }, // 是否显示分页
    index: { type: [Boolean, Function], default: false }, // 索引列
    expand: { type: Boolean, default: false }, // 展开行
    selection: { type: [Boolean, Function], default: false }, // 勾选
    customPageSize: { type: Boolean, default: false }, // 是否可自定义页容量
    headerNoWrap: { type: Boolean, default: true }, // 表头是否不换行
    initNotRequest: { type: Boolean, default: false }, // 是否初始化不请求数据
    fetchData: {
      type: [Function, null],
      default: null,
    }, // 自定义获取数据方法 函数需返回 { list,total }
  };
};
export const tableEmits = {
  // 返回 布尔值 可校验函数参数
  pageChange: (newPage, newPageSize) => true, // 页码 页容量 改变
  getTableDataBefore: (requestBody, currentPage, pageSize) => true, // 获取数据之前
  getTableDataAfter: (data) => true,
};
export function useTableOperation() {
  // 点击添加按钮
  const onInsertClick = () => {};
  // 点击编辑按钮
  const onEditClick = (row) => {};
  // 点击删除按钮
  const onDeleteClick = (row) => {};
  // 表格右上方按钮点击
  const onBtnClick = (name, row) => {
    switch (name) {
      case "add":
        onInsertClick();
        break;
      case "edit":
        onEditClick(row);
        break;
      case "delete":
        onDeleteClick(row);
        break;
    }
  };

  return {
    onBtnClick,
  };
}

export function normalizeProps(item) {
  const itemProps = {
    tableColumn: {}, // formItem属性
    // 其他自定义属性
  };
  for (const key in item) {
    if (tableColumnProps.includes(key)) {
      itemProps.tableColumn[key] = item[key];
    } else if (key === "children") {
      // 处理子项
      itemProps.children = item[key].map((child) => normalizeProps(child));
    } else {
      itemProps[key] = item[key];
    }
  }
  itemProps.visible = item.visible ?? true; // 默认显示
  return itemProps;
}

export function injectTableDefaultConfig(config) {}
